<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>dashboard</title>
    <!-- 引入 echarts.js -->
    <!-- <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts.js"></script>
    <script src="./static/data/js/data.js"></script>
    <link rel="shortcut icon" href="static/favicon.ico" />
    <link
      rel="stylesheet"
      href="static/data/css/bootstrap/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="static/data/css/app.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://www.bootcss.com/p/buttons/css/buttons.css"
    />
  </head>
  <body>
    
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div style="background-color: black; width: 100%; height: 100%">
      <button class="button button-small button-primary" onclick="changeData()">
        刷新
      </button>
      <button class="button button-small button-primary" style="background-color: darkviolet;" onclick="back()">
        返回
      </button>
      <div id="main" style="height: 600px; width: 1000px; margin: auto"></div>
    </div>

    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById("main"));

      var data1 = [
        {
          name: "攻击主机",

          tooltip: {
            formatter: "{b}: 19999<br />",
          },

          symbol:
            "image://",
          symbolSize: [60, 40],
          value: [700, 350],
          x: 800,
          y: 400,
          fixed: true,
          // draggable: false,
          category: 1,
          label: {
            color: "#FFF",
            position: "bottom",
            //fontSize: "0"
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#157eff",
                },
                {
                  offset: 1,
                  color: "#35c2ff",
                },
              ]),
            },
          },
        },

        {
          name: "普通主机",

          tooltip: {
            formatter: "{b}: 19999<br />",
          },

          symbol:
            "image://",
          symbolSize: [60, 40],
          value: [0, 325],
          x: 800,
          y: 400,
          fixed: true,
          // draggable: false,
          category: 1,
          label: {
            color: "#FFF",
            position: "bottom",
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#157eff",
                },
                {
                  offset: 1,
                  color: "#35c2ff",
                },
              ]),
            },
          },
        },
      ];

      var option1 = {
        backgroundColor: "#000",
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: {
          show: false,
          type: "value",
        },
        tooltip: {},
        series: [
          {
            type: "graph",
            zlevel: 5,

            draggable: false,
            coordinateSystem: "cartesian2d", //使用二维的直角坐标系（也称笛卡尔坐标系）
            symbol: "rect",
            symbolOffset: ["15%", 0],

            label: {
              normal: {
                show: true,
              },
            },
            data: data1,
            links: [
              {
                source: "攻击主机",
                target: "普通主机",
              },
            ],

            lineStyle: {
              normal: {
                opacity: 1,
                color: "#53B5EA",
                curveness: 0,

                // 12b5d0
                // type: "dashed",
                width: 2,
              },
            },
          },
        ],
      };

      var data2 = [
        {
          name: "PE路由器1",

          tooltip: {
            formatter: "{b}: 19999<br />",
          },

          symbol:
            "image://",
          symbolSize: [60, 40],
          value: [250, 325],
          x: 800,
          y: 400,
          fixed: true,
          // draggable: false,
          category: 1,
          label: {
            color: "#FFF",
            position: "bottom",
            //fontSize: "0",
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#157eff",
                },
                {
                  offset: 1,
                  color: "#35c2ff",
                },
              ]),
            },
          },
        },
        {
          name: "攻击主机",

          tooltip: {
            formatter: "{b}: 19999<br />",
          },

          symbol:
            "image://",
          symbolSize: [60, 40],
          value: [700, 350],
          x: 800,
          y: 400,
          fixed: true,
          // draggable: false,
          category: 1,
          label: {
            color: "#FFF",
            position: "bottom",
            //fontSize: "0"
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#157eff",
                },
                {
                  offset: 1,
                  color: "#35c2ff",
                },
              ]),
            },
          },
        },

        {
          name: "普通主机",

          tooltip: {
            formatter: "{b}: 19999<br />",
          },

          symbol:
            "image://",
          symbolSize: [60, 40],
          value: [0, 325],
          x: 800,
          y: 400,
          fixed: true,
          // draggable: false,
          category: 1,
          label: {
            color: "#FFF",
            position: "bottom",
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#157eff",
                },
                {
                  offset: 1,
                  color: "#35c2ff",
                },
              ]),
            },
          },
        },
        {
          name: "追踪溯源服务器",

          tooltip: {
            formatter: "{b}: 19999<br />",
          },

          symbol:
            "image://",
          symbolSize: [60, 40],
          value: [380, 105],
          x: 800,
          y: 400,
          fixed: true,
          // draggable: false,
          category: 1,
          label: {
            color: "#FFF",
            position: "bottom",
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#157eff",
                },
                {
                  offset: 1,
                  color: "#35c2ff",
                },
              ]),
            },
          },
        },
        {
          name: "路由器2",

          tooltip: {
            formatter: "{b}: 19999<br />",
          },

          symbol:
            "image://",
          symbolSize: [60, 40],
          value: [380, 450],
          x: 800,
          y: 400,
          fixed: true,
          // draggable: false,
          category: 1,
          label: {
            color: "#FFF",
            position: "bottom",
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#157eff",
                },
                {
                  offset: 1,
                  color: "#35c2ff",
                },
              ]),
            },
          },
        },

        {
          name: "子网1",
          x: 400,
          y: 400,
          value: [120, 325],

          fixed: true,
          symbol:
            "image://",
          symbolSize: [60, 40],
          label: {
            color: "#FFF",
            position: "bottom",
            //fontSize: "0",
          },
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#157eff",
                },
                {
                  offset: 1,
                  color: "#35c2ff",
                },
              ]),
            },
          },
        },

        {
          name: "追踪器1",
          x: 200,
          y: 200,
          value: [110, 165],

          fixed: true,
          symbol:
            "image://",
          symbolSize: [60, 30],
          label: {
            color: "#efefef",
            position: "bottom",
            //fontSize: "0",
          },
          category: 1,

          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#ffb402",
                },
                {
                  offset: 1,
                  color: "#ffdc84",
                },
              ]),
            },
          },
        },
        {
          name: "网络日志采集器1",
          symbol:
            "image://",
          symbolSize: [60, 30],
          label: {
            color: "#efefef",
            position: "bottom",
            //fontSize: "0",
          },
          value: [120, 480],

          x: 200,
          y: 500,
          fixed: true,
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#ffb402",
                },
                {
                  offset: 1,
                  color: "#ffdc84",
                },
              ]),
            },
          },
        },
        {
          name: "路由器1",
          symbol:
            "image://",
          symbolSize: [60, 30],
          label: {
            color: "#efefef",
            position: "bottom",
            //fontSize: "0",
          },
          value: [380, 260],

          x: 300,
          y: 600,
          fixed: true,
          category: 2,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#ffb402",
                },
                {
                  offset: 1,
                  color: "#ffdc84",
                },
              ]),
            },
          },
        },
        {
          name: "子网2",
          symbol:
            "image://",
          symbolSize: [60, 30],
          label: {
            color: "#efefef",
            position: "bottom",
            //fontSize: "0",
          },
          x: 1000,
          y: 300,
          value: [600, 345],

          fixed: true,
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#ffb402",
                },
                {
                  offset: 1,
                  color: "#ffdc84",
                },
              ]),
            },
          },
        },
        {
          name: "追踪器2",
          symbol:
            "image://",
          symbolSize: [60, 30],
          label: {
            color: "#efefef",
            position: "bottom",
            //fontSize: "0"
          },
          x: 1000,
          y: 400,
          value: [610, 175],

          fixed: true,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#ffb402",
                },
                {
                  offset: 1,
                  color: "#ffdc84",
                },
              ]),
            },
          },
          category: 2,
        },
        {
          name: "PE路由器2",
          symbol:
            "image://",
          symbolSize: [60, 30],
          label: {
            color: "#efefef",
            position: "bottom",
            //fontSize: "0",
          },
          x: 1000,
          y: 600,
          value: [520, 355],

          fixed: true,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#ffb402",
                },
                {
                  offset: 1,
                  color: "#ffdc84",
                },
              ]),
            },
          },
          category: 2,
        },
        {
          name: "网络日志采集器2",
          symbol:
            "image://",
          symbolSize: [60, 30],
          label: {
            color: "#efefef",
            position: "bottom",
            //fontSize: "0"
          },
          x: 600,
          y: 200,
          value: [600, 475],

          fixed: true,

          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#ffb402",
                },
                {
                  offset: 1,
                  color: "#ffdc84",
                },
              ]),
            },
          },
          category: 2,
        },
      ];

      var option2 = {
        backgroundColor: "#000",
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: {
          show: false,
          type: "value",
        },
        tooltip: {},
        series: [
          {
            type: "graph",
            zlevel: 5,

            draggable: false,
            coordinateSystem: "cartesian2d", //使用二维的直角坐标系（也称笛卡尔坐标系）
            symbol: "rect",
            symbolOffset: ["15%", 0],

            label: {
              normal: {
                show: true,
              },
            },
            data: data2,
            links: [
              {
                source: "子网1",
                target: "PE路由器1",
              },
              {
                source: "普通主机",
                target: "子网1",
              },
              {
                source: "路由器1",
                target: "追踪溯源服务器",
              },
              {
                source: "PE路由器1",
                target: "路由器2",
              },
              {
                source: "追踪器1",
                target: "子网1",
                lineStyle: {
                  normal: {
                    // color: "#12b5d0",
                  },
                },
              },
              {
                source: "网络日志采集器1",
                target: "子网1",
                lineStyle: {
                  normal: {
                    // color: "#12b5d0",
                  },
                },
              },
              // {
              // 	source: "子网2",
              // 	target: "追踪器2",
              // 	lineStyle: {
              // 		normal: {

              // 		},
              // 	},
              // },

              // {
              // 	source: "路由器1",
              // 	target: "子网2",
              // 	lineStyle: {
              // 		normal: {
              // 			// color: "#12b5d0",
              // 		},
              // 	},
              // },
              // {
              // 	source: "子网2",
              // 	target: "网络日志采集器2",
              // },
              {
                source: "子网2",
                target: "追踪器2",
              },
              {
                source: "子网2",
                target: "攻击主机",
              },
              // {
              // 	source: "PE路由器1",
              // 	target: "PE路由器2",
              // 	lineStyle: {
              // 		normal: {
              // 			// color: "#12b5d0",
              // 		},
              // 	},
              // },
              {
                source: "PE路由器1",
                target: "路由器1",
                lineStyle: {
                  normal: {
                    // color: "#12b5d0",
                  },
                },
              },
              {
                source: "网络日志采集器2",
                target: "子网2",
                lineStyle: {
                  normal: {
                    // color: "#12b5d0",
                  },
                },
              },
              {
                source: "路由器1",
                target: "PE路由器2",
                lineStyle: {
                  normal: {
                    // color: "#12b5d0",
                  },
                },
              },
              {
                source: "PE路由器2",
                target: "子网2",
                lineStyle: {
                  normal: {
                    // color: "#12b5d0",
                  },
                },
              },
              {
                source: "路由器2",
                target: "PE路由器2",
                lineStyle: {
                  normal: {
                    // color: "#12b5d0",
                  },
                },
              },
            ],

            lineStyle: {
              normal: {
                opacity: 1,
                color: "#53B5EA",
                curveness: 0,

                // 12b5d0
                // type: "dashed",
                width: 2,
              },
            },
          },
        ],
      };

      myChart.setOption(option1);

      function changeData() {
        myChart.setOption(option2);
      }
    </script>
  </body>
</html>
